Справочник по BBCode


На основе статьи: Дмитрия Скоробогатова

Общие сведения о тегах

  1. Названия тегов и атрибутов не зависят от регистра. Например, [font=Arial size=+1], [FONT=Arial SIZE=+1] и [FoNt=Arial SiZe=+1] - равнозначны.

  2. Значения атрибутов могут быть закавычены "так" и 'так', либо никак не закавычены. Следующие конструкции равнозначны: [google="BBCode"], [google='BBCode'], [google=BBCode]. Следующие конструкции НЕ равнозначны: [google="Поддержка BBCode"], [google=Поддержка BBCode]. Последний вариант будет интерпретирован скриптом как [google="Поддержка" BBCode=""].

  3. Теги могут быть вложенными. Но те из них, которые создают элементы блочного типа (такие как [h1] или [table]), не могут быть вложены в строчные теги (такие как [i] или [color]). Строчные элементы закрываются, если начинается блочный.

  4. Теги должны быть правильно вложены. Неправильный код "[b][i]текст[/b][/i]" будет интерпретирован скриптом как "[b][i]текст[/i][/b][/i]"

  5. В данной реализации BBCode поддерживаются закрывающие теги вида [/]. Такой тег закрывает последний незакрытый тег. Например, [b]текст[/b] равнозначно [b]текст[/]. Тем не менее рекомендую пользоваться именно первой формой написания. Attention Тогда, в случае нагромождения вложенных тегов, вам будет легче ориентроваться в коде. Кроме того, первая форма написания позволяет скрипту более корректно обрабатывать пользовательские ошибки.

  6. Поддерживается закрытие тега способом [тег /]. Например, конструкции [url name=top][/url] и [url name=top /] равнозначны.

  7. В некоторых случаях можно не писать закрывающий тег. Например, тег [tr] (строка таблицы), будет автоматически закрыт, как только встретится очередной [tr] или закрывающий тег [/table]. Тег [hr] вообще не имеет закрывающего, интерпретируется скриптом как [hr/]. О поведении конкретных тегов смотрите их описания.

  8. При конвертации ББКода в HTML сохраняется форматирование пробелами. Т.е. все двойные пробелы переводятся в '&nbsp;&nbsp;', все переводы строк заменяются на '<br />'. Однако вокруг некоторых элементов (таких как [h1]) игнорируются 1-2 перевода строк, так как эти элементы сами по себе создают дополнительные отступы. Это сделано для того, чтобы по возможности приблизить визуальное представление HTML к исходному ББкоду.

Список тегов

  1. [b] - жирный текст. Аналог HTML-ного <b>. Пример: "[b]текст[/b]". Результат: "текст".

  2. [i] - курсивный текст. Аналог HTML-ного <i>. Пример: "[i]текст[/i]". Результат: "текст".

  3. [u] - подчеркнутый текст. Аналог HTML-ного <u>. Пример: "[u]текст[/u]". Результат: "текст".

  4. [s] - зачеркивание текста. Аналог HTML-ного <s>. Пример: "[s]текст[/s]". Результат: "текст".

  5. [tt] - стиль печатной машинки. Аналог HTML-ного <tt>. Пример: "[tt]текст[/tt]". Результат: "текст".

  6. [sub] - нижний индекс. Аналог HTML-ного <sub>. Пример: "[sub]текст[/sub]". Результат: "текст".

  7. [sup] - верхний индекс. Аналог HTML-ного <sup>. Пример: "[sup]текст[/sup]". Результат: "текст".

  8. [color] - тег для цветового выделения текста. При конвертации переводится в <font color="...">. Пример: "[color=red]текст[/color]". Результат: "текст".

  9. [size] - тег для изменения размера шрифта. При конвертации переводится в <font size="...">. Пример: "[size=6]текст[/size]". Результат: "текст".

  10. [font] - аналог HTML-ного <font>. Используется для установки шрифта. Поддерживает также атрибуты color и size. Примеры:

    Код
    		 Результат
    [font=Arial]текст[/font]
    		 текст
    [font=Verdana color=red size=+2]текст[/font]
    		 текст

  11. [list] - тег для создания списка. Аналог HTML-ных <ul> и <ol>. При конвертации переводится в <ul class="bb"> или в <ol class="bb" type="...">. Единственный вложенный тег - [*], который в свою очередь может иметь вложенные теги. Примеры:

    Код
    		 Результат
    		 Код
    		 Результат
    		 Код
    		 Результат
    [list]
    [*]Раз
    [*]Два
    [*]Три
    [/list]
    • Раз
    • Два
    • Три
    		 [list=1]
    [*]Раз
    [*]Два
    [*]Три
    [/list]
    1. Раз
    2. Два
    3. Три
    		 [list=a]
    [*]Раз
    [*]Два
    [*]Три
    [/list]
    1. Раз
    2. Два
    3. Три

  12. [*] - аналог HTML-ного <li>. Может содержаться только в теге [list]. Автоматически закрывается, если начинается очередной [*] или если закрывается [list]. При конвертации переводится в <li class="bb">. Смотрите примеры в описании [list].

  13. [align] - выравниване текста по левому ([align=left]) или правому ([align=right]) краю, по центру ([align=center]) или по ширине ([align=justify]). При конвертации переводится в <div align="...">. Пример: "[align=right]Текст, выровненный по правому краю.[/align]". Результат:
    Текст, выровненный по правому краю.

  14. [url] - ссылка. Аналог HTML-ного <a>. Поддерживаются атрибуты title, name (для создания якорей) и target, аналогичные HTML-ным. Может быть использован в двух вариантах: "[url]адрес_ссылки[/url]" и "[url=адрес_ссылки]текст ссылки[/url]". Если адрес ссылки не начинается с одной из следующих строк - "http://", "https://", "ftp://", "file://", "#", "/", "?", "./" или "../", то слева к нему автоматом допишется "http://". Примеры:

    Код
    		 Результат
    [url target=_blank]www.sso.ru[/url]
    		 http://www.sso.ru/
    [url=sso.ru title="Хороший сайт"]Сайт sso.ru[/url]
    		 Сайт sso.ru

    Код [url name=this /] создаст якорь в документе.
  15. [email] - тег для создания гиперссылки e-mail. При конвертации переводится в <a class="bb_email" href="mailto:...">...</a>. Поддерживает также атрибуты title, name и target, аналогичные соответствующим в HTML. Примеры:

    Код
    		 Результат
    [email]dima@pc.uz[/email]
    		 dima@pc.uz
    [email=dima@pc.uz title="Мой ящик"]Мой ящик[/email]
    		 Мой ящик

  16. [img] - аналог HTML-ного <img>. Поддерживает атрибуты width, height, align и border. Параметр align отвечает за обтекание изображения по краям и может принимать значения left и right Примеры:

    Код
    		 Результат
    [img]logo.gif[/img]
    [img width=50 height=50]logo.gif[/img]

  17. [nobb] - тег, внутри которого не происходит конвертации ББКода в HTML, не работают "автоматические ссылки" и не вставляются смайлы. Пример: "[nobb][b]ББКод[/b] со смайлом :)[/nobb]". Результат: "[b]ББКод[/b] со смайлом :)".

    Должен предупредить, что неоднозначность во вложенности тегов может привести к неожидавшимся результатам. Например,
    код
    [nobb] текст1 [/nobb] текст2 [/nobb]
    будет интерпретирован скриптом так:
    [nobb] текст1 [/nobb] текст2 [/nobb]
    Код
    [b] текст1 [nobb] текст2 [/b] текст3 [/nobb] текст4 [/b]
    будет интерпретирован скриптом так:
    [b] текст1 [nobb] текст2 [/nobb][/b] текст3 [/nobb] текст4 [/b]

  18. [quote] - Цитата. При конвертации конструкция [quote=Автор]текст[/quote] переводится в

    <table width="90%" border="0" align="center" class="bb_quote">
    <tr><td class="author"><b>Автор писал(а):</b></td></tr>
    <tr><td class="quote">текст</td></tr></table>

    Вот так это выглядит:

    Автор писал(а):
    текст

    Автора указывать необязательно. Вы можете оформить цитаты более изощрено средствами CSS.

  19. [hr] - аналог HTML-ного <hr>. При конвертации переводится в <hr class="bb" />. Пример: "[hr]". Результат:

  20. [table] - таблица. Аналог HTML-ного <table>. При конвертации переводится в <table class="bb">. Поддерживаются атрибуты border, width, cellspacing, cellpadding и align, аналогичные HTML-ным. В [table] могут быть вложены только теги [caption] (заголовок) и [tr] (строка). Пример:

    [table border=1 align=center cellspacing=0 cellpadding=5]
    [caption]    Заголовок[/caption]
    [tr]
    [th]    Столбец 1
    [th]Столбец 2
    [tr]
    [td align=center colspan=2]    Строка
    [/table]

    Результат:
    Заголовок
    Столбец 1
    		 Столбец 2
    Строка

  21. [tr] - строка таблицы. Аналог HTML-ного <tr>. Может быть вложен только в [table]. Может содержать только [th] и [td]. При конвертации переводится в <tr class="bb">. Пример использования смотрите выше.

  22. [td] - ячейка таблицы. Аналог HTML-ного <td>. Может быть вложен только в [tr]. При конвертации переводится в <td class="bb">. Поддерживаются атрибуты width, height, align, valign и colspan, аналогичные HTML-ным. Пример использования смотрите выше.



Материал взят с сайта www.pc.uz